<template>
  <view class="read-box" @click="readDetail">
    <view class="read-content">
      <view class="info-box">
        <img class="info-img" :src="infoData.articlePicture" />
        <view class="info-txt">
          <view class="txt-1 omit2">{{ infoData.title }}</view>
          <!-- <view class="txt-tag"> -->
          <img
          class="tag-img"
            :src="infoData.sourceIcon"
            :style="{
              width: infoData.sourceIconWidth + 'rpx',
              height: infoData.sourceIconHeight + 'rpx',
            }"
          />
          <!-- </view> -->
        </view>
      </view>
      <view class="margin-box">
        <view class="margin-list">
          <view class="view">📖管家一句话描述：</view>
          <view class="view">{{ infoData.aiBrief }}</view>
        </view>
        <view class="margin-list">
          <view class="view">🌟文中摘要：</view>
          <view class="rich-text-warp omit4 view">
            <rich-text :nodes="infoData.aiSummary"></rich-text>
            <!-- {{infoData.aiSummary}} -->
          </view>
        </view>
      </view>
      <view class="more-box"
        :data-spmCntSuffix="'ChatAiPage.briefReportCard@1.more'"
        :data-custom="1"
        :data-spm="1"
      >
        查看更多<uni-icons type="forward" color="#B5B5D2" size="14"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    infoData: {
      type: Object,
      default: {},
    },
  },
  methods: {
    readDetail() {
      this.$navTo(
        "/packageAI/pages/strategyDetail/strategyDetail",
        {
          articleId: this.infoData.id,
        },
        "navigateTo"
      );
    },
  },
};
</script>

<style scoped lang="scss">
.read-box {
  .read-content {
    width: 100&;
    padding-top: 24rpx;
    .info-box {
      display: flex;
      // width: 590rpx;
      margin: 0 auto;
      border-bottom: 1rpx solid #eeeeee;
      padding: 0 24rpx 30rpx 24rpx;
      .info-img {
        width: 124rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }
      .info-txt {
        // height: 154rpx;
        display: flex;
        flex: 1;
        flex-direction: column;
        // justify-content: space-between;
        .txt-1 {
          font-size: 28rpx;
          color: $sl-color-dark-grey;
          font-weight: 600;
        }
        .tag-img{
          padding-top: 10rpx;
        }
      }
    }
    .margin-box {
      margin: 20rpx auto 0;
      padding: 0 24rpx;
      .margin-list {
        padding-bottom: 30rpx;
        .view {
          color: $sl-color-black;
          font-size: 28rpx;
        }
      }
    }
  }
  .rich-text-warp {
    // height: 230rpx;
    overflow: hidden;
  }
  .more-box {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 36rpx;
    justify-content: center;
    color: $sl-color-light-grey;
    font-size: 24rpx;
    border-radius: 0 0 25rpx 25rpx;
  }
}
</style>
